<template>
    <div class="chat-container">
        <div class="chat-messages">
            <el-card
                v-for="(message, index) in messages"
                :key="index"
                :class="{
                    'right-align': message.messageType === contactData.userType,
                    'left-align': message.messageType !== contactData.userType
                }"
                class="message-card"
                size="small"
            >
                <div
                    :class="{
                        'user-message':
                            message.messageType === contactData.userType,
                        'other-message':
                            message.messageType !== contactData.userType
                    }"
                >
                    {{
                        message.messageType === '求职者登录'
                            ? message.seekerName
                            : message.enterpriseName
                    }}
                    <p>{{ message.messageDate }} {{ message.messageTime }}</p>
                    <p>{{ message.messageContent }}</p>
                </div>
            </el-card>
        </div>
        <div class="chat-input">
            <el-input
                v-model="newMessage"
                placeholder="输入消息..."
                @keyup.enter="sendMessage"
            ></el-input>
            <el-button type="primary" @click="sendMessage">发送</el-button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            contactId: '',
            messages: [
                {
                    messageContent: '',
                    messageType: '',
                    messageDate: '',
                    messageTime: '',
                    seekerName: '',
                    enterpriseName: ''
                }
            ],
            contactData: {
                id: '',
                userType: '',
                messageContact: ''
            },
            newMessage: '',
            sendMessageInfo: {
                messageContent: '',
                messageType: '',
                messageContact: ''
            },
            timer: ''
        }
    },
    mounted() {
        this.$axios
            .post('/message/allMessages', this.contactData)
            .then((resp) => {
                this.messages = resp.data
            })
    },
    methods: {
        sendMessage() {
            if (this.newMessage.trim() !== '') {
                this.sendMessageInfo.messageContent = this.newMessage
                this.sendMessageInfo.messageType = this.contactData.userType
                this.sendMessageInfo.messageContact =
                    this.contactData.messageContact
                this.$axios
                    .post('/message/sendMessage', this.sendMessageInfo)
                    .then((resp) => {
                        this.$message(this.newMessage)
                    })
                this.newMessage = ''
            } else {
                this.$message({
                    message: '发送消息为空',
                    type: 'warning'
                })
            }
        },
        showMessage() {
            // this.$message('newMessage')
            this.$axios
                .post('/message/allMessages', this.contactData)
                .then((resp) => {
                    this.messages = resp.data
                })
        },
        setTime() {
            this.timer = setInterval(() => {
                this.showMessage()
            }, 1000)
        }
    },
    computed: {
        listenMessageContact() {
            return this.$store.state.messageContact
        }
    },
    created() {
        this.contactData.id = this.$store.state.id
        this.contactData.userType = this.$store.state.userType
        this.contactData.messageContact = this.$store.state.messageContact
        this.setTime()
    },
    beforeDestroy() {
        clearInterval(this.timer) // 清除定时器
        this.timer = null
    },
    watch: {
        listenMessageContact: {
            handler() {
                this.contactData.messageContact =
                    this.$store.state.messageContact
                this.showMessage()
            },
            deep: true
        }
    }
}
</script>

<style>
.chat-container {
    display: flex;
    flex-direction: column;
    height: 88vh;
}
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}
.message-card {
    margin-bottom: 10px;
}
.chat-input {
    display: flex;
    padding: 0 10px;
    border-top: 1px solid #eaeaea;
}
.chat-input .el-input {
    flex: 1;
    margin-right: 10px;
}

.right-align {
    float: right;
    width: 60%;
}

.left-align {
    float: left;
    width: 60%;
}

.other-message {
    background-color: #409eff;
    padding: 10px;
    border-radius: 5px;
}

.user-message {
    background-color: #67c23a;
    padding: 10px;
    border-radius: 5px;
}
</style>
